<div class="setup-wrapper m-auto px-3">
  <div class="row">
    <div class="py-5">
      <div class="text-center">
        <img alt="Worklenz" height="50" ngSrc="/assets/images/logo.png" width="235">
      </div>

      <div class="pt-5 col-md-3 mx-auto bg-white">
        <nz-skeleton [nzActive]="true" [nzLoading]="loading">
          <nz-radio-group [(ngModel)]="selectedTeamId" [name]="'team'" class="w-100">
            <ng-container *ngIf="teams.length">
              <h5 [ngStyle]="{ 'margin-bottom.px': 16 }" nz-typography>团队</h5>
              <nz-list nzBordered>
                <nz-list-item
                  *ngFor="let item of teams"
                  [class.selected]="selectedTeamId === item.id"
                  (click)="selectTeam(item.id, false)"
                >
                  <span nz-typography>{{item.name}}</span>
                  <label nz-radio [nzValue]="item.id"></label>
                </nz-list-item>
              </nz-list>
            </ng-container>

            <ng-container *ngIf="invites.length">
              <h5 [ngStyle]="{ margin: '16px 0' }" nz-typography>邀请</h5>
              <nz-list nzBordered>
                <nz-list-item
                  *ngFor="let item of invites"
                  [class.selected]="selectedTeamId === item.team_id"
                  (click)="selectTeam(item.team_id, true)"
                >
                  <span nz-typography>{{item.team_name}}</span>
                  <label nz-radio [nzValue]="item.team_id"></label>
                </nz-list-item>
              </nz-list>
            </ng-container>
          </nz-radio-group>

          <nz-divider></nz-divider>

          <button [nzLoading]="switching" (click)="continueWithSelection()" nz-button [nzType]="'default'"
                  [nzSize]="'large'" nzBlock>
            <span nz-icon nzType="check" nzTheme="outline"></span> 继续选择
          </button>
        </nz-skeleton>
      </div>
    </div>
  </div>
</div>
